{% extends "layout.html" %}

{% block title %}Care Circle{% endblock %}

{% block content %}
<section class="hero">
    <h1>Care Circle</h1>
    <p class="tagline">
        For when someone you love is in the hospital. See at a glance what's
        already been brought or claimed for any given day — no gaps,
        no pileups.
    </p>
</section>

<section class="two-column">
    <div class="card">
        <h2>Start a new circle</h2>
        <p>Create a circle for a patient or situation and get a short code to share.</p>
        <a class="button" href="{{ url_for('create_circle') }}">Create a circle</a>
    </div>

    <div class="card">
        <h2>Join an existing circle</h2>
        <p>Already have a code? Enter it to see the schedule.</p>
        <form method="POST" action="{{ url_for('join_circle') }}">
            <label for="code">Circle code</label>
            <input type="text" id="code" name="code" placeholder="e.g. A1B2C3" required
                   value="{{ request.form.get('code', '') if request else '' }}">
            <button type="submit" class="button">Join circle</button>
        </form>
        {% if join_error %}
            <p class="error">{{ join_error }}</p>
        {% endif %}
    </div>
</section>
{% endblock %}